<template>

  <div ref="card">
    <div class="text-left pt40">
      <span class="title">关键指标</span>
      <span class="seperateline">|</span>
      <span class="subtitle" @click="$router.push('/shopAlter')">{{store.storeName}}
              <i class="iconfont icon-down downicon"></i>
      </span>
      <span class="scan" @click="scan"><i class="iconfont icon-header-scan"></i></span>
    </div>
    <div class="time-position">
      {{datePresent | formatDate}}
    </div>
    <mt-swipe :continuous="false" :stopPropagation="false" :auto="0" :speed="1">
      <mt-swipe-item v-for="data in datas" :key="data.$index">
        <switchState :value="data" :dizhi="data.bannerSort"></switchState>
      </mt-swipe-item>
    </mt-swipe>
    <img src="../../../assets/wave.png" class="wave"/>
  </div>

</template>
<script>
  /**
   * @namespace  components/home/carousel
   * @author ashen
   * @description 首页滑动卡片
   */
  import Vue from 'vue';
  import { Swipe, SwipeItem } from 'mint-ui';
  import api from '@/common/api/home';
  import {mapGetters} from 'vuex';
  import switchState from './switchState.vue';
  import dateSet from '@/common/dateFilter.js';
  import nativeApi from '@/common/native.js';

  Vue.component(Swipe.name, Swipe);
  Vue.component(SwipeItem.name, SwipeItem);
  export default {
    components: {
      'switchState': switchState
    },
    activated () {
      api.getCarouselData().then(res => {
        if (res.bannerList.length === 0) {
          this.$router.push('/home/reports');
        } else {
          this.datas = res.bannerList;
        }
      });
    },
    created () {
      let switchState = localStorage.getItem('switchState');
      switchState = (switchState === 'true' || false);
      this.switchState = switchState;
    },
    data () {
      return {
        switchState: '',
        datePresent: new Date(),
        datas: []
      };
    },
    computed: {
        ...mapGetters('shopAlter', {
            store: 'store'
        })
    },
    updated () {
      this.slides = this.$refs.card;
      this.slides.addEventListener('touchstart', this.start, false);
    },
    methods: {
      moneyswitch () {
        this.switchState = !this.switchState;
        localStorage.setItem('switchState', this.switchState);
      },
      scan () {
        nativeApi.scan();
      },
      //滑动开始
      start (event) {
        var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch，取第一个touch
        this.startPos = {x: touch.pageX, y: touch.pageY, time: new Date()}; //取第一个touch的坐标值
        //console.log(this.startPos.y);
        this.isScrolling = 0; //这个参数判断是垂直滚动还是水平滚动
        this.slides.addEventListener('touchmove', this.touchMove, false);
        //this.slides.addEventListener('touchend', this.touchEnd, false);
      },
      touchMove (event) {
        //当屏幕有多个touch或者页面被缩放过，就不执行move操作
        if (event.targetTouches.length > 1 || (event.scale && event.scale !== 1)) {
          return false;
        }
        var touch = event.targetTouches[0];
        this.endPos = {x: touch.pageX - this.startPos.x, y: touch.pageY - this.startPos.y};
        this.isScrolling = Math.abs(this.endPos.x) < Math.abs(this.endPos.y) ? 1 : 0; //isScrolling为1时，表示纵向滑动，0为横向滑动
        if (this.isScrolling === 1) {
          event.preventDefault(); //阻止触摸事件的默认行为，即阻止滚屏
          if (this.endPos.y < 0) {
            if (Math.abs(this.endPos.y) > 150) {
              this.slides.removeEventListener('touchstart', this.start, false);
              this.slides.removeEventListener('touchmove', this.touchMove, false);
              this.$router.replace('/home/reports');
            }
          } else {
            this.slides.removeEventListener('touchmove', this.touchMove, false);
          }
        } else {
          this.slides.removeEventListener('touchmove', this.touchMove, false);
        }
      }
    },
    filters: {
      formatDate: function (time) {
        let date = new Date(time);
        return dateSet.formatDate(date, 'yyyy-MM-dd hh:mm:ss');
      }
    }
  };
</script>
<style lang="scss">
  @import "../../../assets/css/variable";
  .mint-swipe{
    height: 70%;
    .mint-swipe-indicator.is-active {
      background: $theme-color;
      opacity: 0.8;
    }
  }

  .scan {
    float: right;
    margin-right: px2rem(24px);
    i.iconfont {
      font-size: px2rem(52px);
    }
  }
  .wave{
    width: 100%;
    bottom: 0;
    left:0;
    position: absolute;
  }
  .title {
    font-size: px2rem(40px);
    padding-left: px2rem(20px);
  }

  .subtitle {
    font-size: px2rem(27px);
  }

  .seperateline {
    color: #dedede;
    padding-right: px2rem(10px);
    padding-left: px2rem(10px);
  }

  .time-position{
    margin:0 auto;
    margin-top: px2rem(60px);
    color: #999;
    text-align: center;
    width: px2rem(300px);
    line-height: px2rem(40px);
    border-radius: px2rem(20px);
    border: 1px solid #dedede;
  }
  .imgcan {
    text-align: center;
    padding-top: px2rem(50px);
    padding-bottom: px2rem(50px);
  }
  .showimg {
    width: px2rem(240px);
  }

</style>
